<!DOCTYPE html>
<html>
<head>
	<link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
	<link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
	<script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>

	<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
	<script src="../../jsrender.js" type="text/javascript"></script>
</head>
<body>
<div class="nav"><a href="03_compiled-template.html">Prev</a> <a href="index.html">Index</a> <a href="05_input.html">Next</a></div>

<h3>JsRender: Data Arrays</h3>

<!--====== Container ======-->
<table><tbody id="details"></tbody></table>

<!--====== Template ======-->
<script id="personTmpl" type="text/x-jsrender">
	<tr>
		<td>{{:firstName}}</td>
	</tr>
</script>

<!--====== Script ======-->
<script type="text/javascript">

var people = [
	{
		firstName: "Jeff"
	},
	{
		firstName: "Rebecca"
	}
];

// An array renders once for each item (concatenated)
var html = $( "#personTmpl" ).render( people );

// Insert as HTML
$( "#details" ).html( html );

</script>

<!--================ End of Demo Section ================-->

<h4>Data:</h4>
<pre class="brush: js;">
var people = [
    {
        firstName: "Jeff"
    },
    {
        firstName: "Rebecca"
    }
];
</pre>

<h4>Script:</h4>
<pre class="brush: js;">
// An array renders once for each item (concatenated)
var html = $( "#personTmpl" ).render( people );

// Insert as HTML
$( "#details" ).html( html );
</pre>
</body>
</html>

